<template>
  <h2>{{ person2.name }}</h2>
  <button @click="person2.name = 'xxx'">修改 name</button>
</template>
<script>
import { markRaw, reactive, readonly, shallowReadonly, toRaw } from 'vue'
export default {
  setup() {
    const obj = {
      name: 'ifer',
      age: 18,
    }
    const person2 = reactive(obj)
    console.log(toRaw(person2) === obj) // true

    const a = toRaw(readonly({ age: 18 }))
    console.log(a)

    return {
      person2,
    }
  },
}
</script>
